import React, { useState, useMemo } from 'react';
import { Dropdown, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';

const items = [
  { key: '1', label: 'qwen2.5-32b-instruct' },
  { key: '2', label: 'qwq-32b-preview' },
  { key: '2-1', label: 'qvq-72b-preview' },
  { key: '3', label: 'qwen2.5-72b-instruct' },
  { key: '4', label: 'qwen2.5-14b-instruct' },
  { key: '4-1', label: 'qwen2.5-14b-instruct-unique' }, // 修改重复的key
  { key: '5', label: 'qwen2.5-7b-instruct' },
  { key: '6', label: 'qwen2.5-3b-instruct' },
  { key: '7', label: 'qwen2.5-1.5b-instruct' },
  { key: '8', label: 'qwen2.5-0.5b-instruct' },
  { key: '9', label: 'qwen2-72b-instruct' },
  { key: '10', label: 'qwen2-57b-a14b-instruct' },
  { key: '11', label: 'qwen2-7b-instruct' },
  { key: '12', label: 'qwen2-1.5b-instruct' },
  { key: '12-2', label: 'llama3.3-70b-instruct' }, // 修改重复的key
  { key: '12-3', label: 'llama3.2-3b-instruct' }, // 修改重复的key
  { key: '12-4', label: 'llama3.1-405b-instruct' }, // 修改重复的key
  { key: '12-5', label: 'llama3.1-70b-instruct' } // 修改重复的key
];

const ModelDropdown = ({ onSelect }) => {
  const [selectedItem, setSelectedItem] = useState(items.length > 0 ? items[0] : null);

  const handleSelect = async (item) => {
    setSelectedItem(item);
    if (onSelect) {
      try {
        await onSelect(item);
      } catch (error) {
        console.error('Error in onSelect:', error);
      }
    }
  };

  const dropdownItems = useMemo(() => items.map(item => ({
    ...item,
    label: (
      <a onClick={(e) => {
        e.preventDefault();
        handleSelect(item);
      }}>
        {item.label}
      </a>
    ),
  })), [items]);

  const commonStyle = { margin: 0, padding: 0 };

  return (
    <Space direction="vertical" style={commonStyle}>
      <Space wrap style={commonStyle}>
        <Dropdown
          menu={{ items: dropdownItems }}
          placement="bottomLeft"
          arrow
          style={commonStyle}
        >
          <a onClick={(e) => e.preventDefault()} style={commonStyle}>
            <Space style={commonStyle}>
              {selectedItem?.label || 'No items available'}
              <DownOutlined />
            </Space>
          </a>
        </Dropdown>
     </Space>
    </Space>
  );
};

export default ModelDropdown;